<template>
  <portalDialog
    :dialog-visible.sync="show"
    title="选择系统图标"
    :show-tool-bar="false"
    width="60%"
    @defineFun="defineFun"
    @comfireFun="comfireFun"
  >
    <template slot="content">
      <!-- <Icon v-for="item in iconList" :key="item.icon_id" :type="item.iconName"></Icon> -->
      <div class="choseIcon-list">
        <div v-for="item in iconList" :key="item.icon_id" class="choseIcon-list-item" :class="{active:item.active}" @click="handClickFun(item)">
          <Icon :type="item.iconName" size="35" />
          <div class="choseIcon-name">{{ item.name }}</div>
        </div>
      </div>

    </template>
  </portalDialog>
</template>

<script>
import portalDialog from '@/components/portalDialog'
import { IconData } from '../iconData/iconfont'
export default {
  name: 'ChoseIcon',
  components: {
    portalDialog
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      IconData,
      iconList: []
    }
  },
  computed: {
    show() {
      return this.dialogVisible
    }
  },
  created() {
    console.log(this.IconData)
    this.changeIconList()
  },
  methods: {
    defineFun() {
      const icon = this.iconList.find(v => v.active)
      // this.show = false;
      this.$emit('defineFun', icon)
    },
    comfireFun() {
      this.$emit('close')
    },
    changeIconList() {
      const preFix = this.IconData.css_prefix_text
      this.iconList = this.IconData.glyphs.map(v => {
        const json = {
          ...v,
          iconName: preFix + v.font_class,
          active: false
        }
        return json
      })
    },
    setIconName(iconName) {
      const icon = this.iconList.find(v => v.iconName === iconName) || {}
      console.log(icon)
      this.iconList.forEach(v => {
        this.$set(v, 'active', false)
      })
      this.$set(icon, 'active', true)
    },
    handClickFun(item) {
      this.iconList.forEach(v => {
        this.$set(v, 'active', false)
      })
      this.$set(item, 'active', true)
    }
  }
}
</script>

<style lang="less" scoped>
.choseIcon-list{
  width: 100%;
  overflow: hidden;
  // display: flex;
  //  flex-wrap: wrap;
  .choseIcon-list-item{
    float: left;
    width:16.66%;
    text-align: center;
    height: 100px;
    // line-height: 120px;
    color: #666;
    font-size: 13px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    // margin-right: -1px;
    // margin-bottom: -1px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    // width:20%;
    .iconfont{
      margin-bottom:10px;
    }
    &.active{
      .bgColor();
      .iconfont{
        color:#fff;
      }
      .choseIcon-name{
        color:#fff;
      }
    }
  }
}
</style>
